<template>
  <!-- 采购退回 -->
  <div class="purchaingback">
    <el-main>
      <div style="margin-bottom: 10px">
        <el-select v-model="value" placeholder="采购模式">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-select v-model="value" placeholder="全部状态">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-select v-model="value" placeholder="全部">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-date-picker
          v-model="value1"
          end-placeholder="结束日期"
          start-placeholder="开始日期"
          type="daterange"
        />
        <div class="search">
          <!-- <el-input v-model="input" placeholder="输入单号"></el-input> -->
          <el-input v-model="input" placeholder="输入单号">
            <el-button slot="append" icon="el-icon-search" />
          </el-input>
          <el-input v-model="input" placeholder="源采购单搜索">
            <el-button slot="append" icon="el-icon-search" />
          </el-input>
          <!-- <el-button>导入</el-button> -->
          <!-- <el-button>导出</el-button> -->
        </div>
        <el-button>导出</el-button>
        <el-button type="primary" @click="$router.push('/purchase/addpurchasingback')" >新增</el-button>
      </div>
      <el-table
        :data="tableData"
        height="400px"
        max-height="500"
        style="width: 100%"
      >
      <el-table-column label="序号" type="index">
      </el-table-column>
        <el-table-column label="商品图片" prop="name">
          <template slot-scope="scope">
            <img :src="scope.row.image_path" style="width: 40px;" alt="">
          </template>
        </el-table-column>

        <el-table-column label="商品名字" prop="product_name" />
        <el-table-column label="单价" prop="address">
          <template slot-scope="scope">
            <div>{{scope.row.signfor_price/100}}</div>
          </template>
          </el-table-column>
        <el-table-column label="数量" prop="signfor_qty" width="120" />
        <el-table-column label="金额" prop="signfor_subtotal" width="120">
          <template slot-scope="scope">
            <div>{{scope.row.signfor_price/100 * scope.row.signfor_qty}}</div>
          </template>
          </el-table-column>
        <el-table-column label="状态" prop="zip" width="120">
          <template slot-scope="scope">
            <div>{{scope.row.status | statetranslate}}</div>
          </template>
          </el-table-column>
          <el-table-column label="备注" prop="remarks" />
        <el-table-column fixed="right"  label="操作" width="120">
          <template slot-scope="scope">
            <div v-if="scope.row.status == 1" style="display: flex;">
              <div style="flex: 1;">
                <el-popconfirm
                  confirm-button-text='确定'
                  cancel-button-text='不用了'
                  icon="el-icon-info"
                  icon-color="red"
                  @confirm="confirmfunc(scope.row)"
                  title="确定退回吗？"
                >
                <el-link  slot="reference" :underline="false" type="primary">确定</el-link>
                </el-popconfirm>
              </div>
              <div style="flex: 1;">

                <el-link :underline="false" @click="$router.push('/purchase/editpurchasingback/'+scope.row.order_id)" type="primary">编辑</el-link>
              </div>
              <div style="flex: 1;">
                  <el-popconfirm
                    confirm-button-text='确定'
                    cancel-button-text='取消'
                    icon="el-icon-info"
                    icon-color="red"
                    @confirm="delfunc(scope.row)"
                    title="确定删除吗？"
                  >
                    <el-link  slot="reference" :underline="false" type="primary">删除</el-link>
                </el-popconfirm>
              </div>
            </div>
            <div v-else>{{scope.row.status | statetranslate}}</div>
          </template>
          </el-table-column>
      </el-table>
      <el-pagination
        :current-page="currentPage4"
        layout="total, sizes, prev, pager, next, jumper"
        :page-size="10"
        :page-sizes="[10, 20, 30, 40]"
        :total="totel"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      />
    </el-main>
  </div>
</template>

<script>
  import {purchasebackList,purchasebackedit,purchasebackdel} from '@/api/purchase/purchase_back.js'
  export default {
    data() {
      return {
        value1: '',
        currentPage4: 1,
        pagesize:10,
        tableData: [],
        totel:0,
      }
    },
    filters:{
      statetranslate(val){
        // 1 待确认  2 待发货  3 已发货  4已完成    普通订单还有 5已退货
        if(val == 1){
          return "待确认"
        }else if(val == 2){
          return "待发货"
        }else if(val == 3){
          return "已发货"
        }else if(val == 4){
          return "已完成"
        }else{
          return val
        }
      }
    }
    ,created() {
      this.inittable()

    }
    ,methods: {
      async inittable(){
        let params = {
          size:this.pagesize,
          current:this.currentPage4,
          userid:11
        }
        let res = await purchasebackList(params,{})
        // console.log("res",res.total);
        this.totel = res.total
        this.tableData = res.list
        console.log("aaa",this.tableData);
      }
      ,async confirmfunc(val){
        console.log(val);
        let data={
              "id": val.id,
              //"timeDelivery": "2020-12-10 09:11:11",  //退货发货时间
            //  "signforTime": "2020-12-10 09:11:11",    //退货签收时间
              "signforPrice": val.price*100,
              "signforQty": val.qty,
              "signforSubtotal": val.subtotal*100,
              "status": 2,   //  1待确认  2待发货  3已发货  4已完成
             // "shippingCost": 50   //运输费
        }
        console.log(data);

       let res = await purchasebackedit(data)
       if(res.status == 200){
         this.$message({
           message:"成功",
           type:"success"
         })
       }else{
         this.$message({
           message:"失败",
           type:"error"
         })
       }
       this.inittable()
      },
      async delfunc(val){
        let res = await purchasebackdel(val.id)
        if(res.status == 200){
          this.$message({
            message:"删除成功",
            type:"success"
          })
        }else{
         this.$message({
           message:"失败",
           type:"error"
         })
       }
       this.inittable()
      }
      ,handleSizeChange(val) {
        this.pagesize = val
        console.log(`每页 ${val} 条`)
        this.inittable()
      },
      handleCurrentChange(val) {
        this.currentPage4 = val
        console.log(`当前页: ${val}`)
        this.inittable()
      },
    },
  }
</script>

<style>
  .purchaingback .el-select {
    /* display: inline-block; */
    width: 10%;
    margin-right: 10px;
  }
  .purchaingback .el-date-editor--daterange.el-input__inner {
    width: 20%;
    margin-right: 10px;
  }
  .purchaingback .search {
    display: flex;
    width: 30%;
    display: inline-block;
    margin-right: 10px;
  }
  .purchaingback
    .search
    .el-input.el-input--small.el-input-group.el-input-group--append {
    width: 50%;
    /* margin-right: 10px; */
  }
  .purchaingback .search .el-button.el-button--default.el-button--small {
    background-color: #1890FF !important;
    color: #ffffff;
    font-size: 10px;
  }
</style>
